* {
    margin: 0;
    padding: 0;
    /* 保持整个页面的内外边距为0 */
}
/* 推荐导航栏的最外层元素为nav标签 */
nav {
    width: 100%;
    /* %单位是根据页面来进行规划，希望你们的作业可以用%和px做单位运用，也可以熟悉一下vm，vh单位 */
    /* 1vw 等于浏览器宽度的 1% */
    height: 60px;
    background-color: #fff;
}

nav p {
    font-family: arial;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 55px;
    padding: 0 20px;
    float: left;
    /* 使元素向左浮动，并可通过margin、定位等手段使其在水平左右移动 */
    /* 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。   */
    /* 注意：float浮动以后，元素会变成块元素，且脱离普通流 */
    /* 使用浮动时需注意是否需要清除浮动 */
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
    /* 相对定位，不会脱离文档流，相对于自己原来在文档流的位置进行定位 */
    /* 建议百度学习五种定位 */
}

nav ul li a {
    display: block;
    /* 将元素显示为块元素 */
    font-family: arial;
    font-size: 14px;
    padding: 22px 10px 0;
    text-decoration: none;
}

nav ul li ul {
    display: none;
    /* 此元素不会被显示 ，后设定鼠标悬浮改变float的值*/
    position: absolute;
    /* 绝对定位，脱离文本流，不会占据原先的位置 */
    /* 绝对定位的元素的位置相对于最近的已定位祖先元素，若没有，则相对于最初的包含元素 */
    left: -45px;
    /* 向右平移45px */
    background-color: #fff;
    padding: 10px;
    border-radius: 0px 0px 4px 4px;
    /* 圆角 */
}

nav ul li:hover ul {
    display: block;
}

nav ul li ul li {
    width: 160px;
}

nav ul li ul li a {
    margin: 8px 10px;
    padding: 5px 8px;
}

nav ul li ul li a:hover {
    background-color: orange;
}
.one{
    border-width: 1px 1px 0px 1px;
    border-style:solid ;
    border-color: orange;
}
.two{
    border-width:0px 1px 0px 1px;
    border-style:solid ;
    border-color: orange;
}
.three{
    border-width: 0px 1px 1px 1px;
    border-style:solid ;
    border-color: orange;
}